<template>
  <div class="h-full flex flex-col overflow-hidden">
    <LlNavBar :bgColor="navBgColor.color" />
    <!-- <transition name="slide-right" mode="out-in"> -->
    <router-view class="flex-1 overflow-hidden"></router-view>
    <!-- </transition> -->
    <LlTabBar v-if="showTabbar" />
  </div>
</template>

<script>
import LlNavBar from "@/components/ll-nav-bar";
import LlTabBar from "@/components/ll-tab-bar";
export default {
  components: {
    LlNavBar,
    LlTabBar,
  },
  computed: {
    showTabbar() {
      return ["/workbench", "/business"].includes(this.$route.path);
    },
  },
  data() {
    return {
      navBgColor: {
        color: "",
      },
    };
  },
  watch: {
    $route() {
      this.navBgColor.color = "";
    },
  },
  provide() {
    return { navBgColor: this.navBgColor };
  },
};
</script>

<style lang="scss" scoped></style>
